<template>
  {{ form }}
  <NvCrud v-model:form="form" :option :data :pagination="{ pageSize: 3 }" />
</template>

<script setup lang="tsx">
import type { NvCrudOption, RowData } from 'nv-crud'
import { NvCrud } from 'nv-crud'
import { ref } from 'vue'

const form = ref<RowData>({})
const data = Array.from({ length: 50 }).map((_, i) => {
  return {
    key: i,
    name: `name_${i}`,
    physicsAttack: `physicsAttack_${i}`,
    magicAttack: `magicAttack_${i}`,
    defend: `defend_${i}`,
    speed: `speed_${i}`,
  }
})

const option: NvCrudOption = {
  singleLine: false,
  actionbar: false,
  toolbar: false,
  fields: {
    name: { title: 'Name' },
    attrs: { title: 'Attrs',
      children: {
        attack: {
          title: 'Attack',
          children: {
            physicsAttack: { title: 'Physics Attack' },
            magicAttack: { title: 'Magic Attack' },
          },
        },
        defend: { title: 'Defend' },
        speed: { title: 'Speed' },
      },
    },
  },
}
</script>
